<template>
	<view class="bg min100 plr-30 gray-2 pb-100">
		<view class="status_bar"></view>
		<view class="topbox">
			<view class="navitem" v-for="item in arr" @click="navfn(item)">
				<view :class="item.active?'navtext1':'navtext'">{{item.val}}</view>
				<view class="line" v-if="item.active"></view>
			</view>
			<view class="">
				十八树藏
			</view>
			<image src="../../static/searchh.png" mode="widthFix" @click="search" style="width: 50rpx;"></image>
		</view>
		<view class="container" v-if="showpage == 0">
			<!-- 轮播图 -->
			<u-swiper @click="toUrl" :list="banner" height="300" class="mb-40" style="border-radius: 45rpx;"></u-swiper>
			<!-- 			<u-search placeholder="请输入搜索内容" @custom="toSearch" search-icon-color="#44ACFF" v-model="searchStr"
				placeholder-color="#999" color="#333" bg-color="#FFFFFF" :action-style=actionStyle></u-search> -->
			<view class="box_two" style="display: flex;align-items: center;
    justify-content: space-between;">
				<image class="image-bg" src="../../static/two-bg.png" mode=''>
					<view class="11" style="margin: 0 0 0 30rpx;">
						<view class="" style="width: 46rpx;height: 60rpx;">
							<image src="../../static/tuo-bg-wenzi.png" mode="" style="width: 100%;height: 100%;">
							</image>
						</view>
					</view>
					<view class="text_gonggao">
					<view id="demo">
						<view class="listlist">
							<li  v-for="(item, index) in ulList" :key="item.id" :class="!index && play ? 'toUp' : ''">
								{{ item.msg }}
							</li>
						</view>
					</view>
					</view>
					<view class="" style="margin: 0 30rpx 0 0;width: 20rpx;height: 20rpx;">
						<image src="../../static/all.png" mode="" style="width: 100%;height:100%;margin: 0 0 15rpx 0;">
						</image>
					</view>

			</view>
			<view class="" style="width: ;height: 100px;">
				<image src="../../static/jishoutiaozhuan.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view style="display: flex;    line-height: 80rpx;">

				<view style="color:#000;" class="size-28 ml-30 mb-14" v-for="(item, index) in tabs" :key="index">
					<view @click="changeTop(index)">
						{{ item }}
					</view>
					<!-- <image src="../../static/btmLine.png" class="lineImg ml-48" v-if="topIndex == index"></image> -->
					<!-- <view style="width: 40rpx; height: 14rpx; background: transparent; margin-top: 30rpx" v-if="topIndex != index"> </view> -->
				</view>

			</view>
			<!-- 数字藏品 -->
			<view v-if="topIndex == 0" class="allcollect">
				<empty v-if="collectList.length == 0"></empty>
				<view style="" v-else v-for="(item, index) in collectList" :key="index" @click="goDetails(item.id)"
					class="collectitem">
					<view class="collectItem mb-30 size-22">
						<image class="collectImg" :src="item.image" mode="widthFix"></image>
						<view v-if="item.status == 1" class="itemTips status1 plr-8 ptb-8">
							{{ item.status_text }}
						</view>
						<view class="itemTips2 plr-8 ptb-8" v-if="item.status == 2">
							<!-- {{ item.status_text }} -->
							<image src="../../static/sell-out.png" mode="widthFix" class="sellout"></image>
						</view>
						<view class="flex flex-start itemTips plr-8 ptb-8" v-if="item.status == 3"
							style="color: #9fc58c; background: #161912">
							<!-- <image src="../../static/time.png" class="timeImg mr-8"></image> -->
							<view class="">
								{{ item.status_text }}
							</view>
						</view>
						<view class="itemTips plr-8 ptb-8 flex center" v-if="item.status == 4"
							style="background: linear-gradient(to right, #cf58e5, #fc76d5)">
							<view class="">
								{{ item.status_text }}
							</view>
							<u-count-down :timestamp="item.diff_time" bg-color="background:transparent" color="#fff"
								font-size="24" separator-color="#fff" style="margin-left: 5rpx"></u-count-down>
						</view>
						<view class="plr-30 ptb-30">
							<view class="flex flex-start">
								<view class="size-34 gray workname" style="color: #000;">
									{{ item.name }}
								</view>
								<!-- <image src="../../static/homeIcon.png" class="homeIcon ml-20" mode=""></image> -->
							</view>
							<view class="mtb-20 flex flex-start">
								<view class="tipsLeft mr-20 plr-10 ptb-7 radius-6" style="color: #000;">
									{{ item.goods_category_name }}
								</view>
								<view class="flex flex-start mr-20">
									<view class="tipsLeft plr-10 ptb-7 radius-6" style="color: #000;"> 限量 </view>
									<view class="tipsRight red ptb-7 plr-5" style="border-radius: 0 6rpx 6rpx 0">
										{{ item.stock }}
									</view>
								</view>
								<!-- <view class="tipsRight ptb-7 red plr-20 radius-6">
		              {{ item.label }}
		            </view> -->
							</view>
							<view class="flex flex-between" style="margin: 10rpx 0;">
								<view class="flex flex-start">
									<view class="" style="color: #000;">by</view>
									<!-- <image :src="item.author_image" class="userImg" style="color: #000;"></image> -->
									<view class="size-24 gray ml-24 author" style="color: #000;">
										{{ item.author_name }}
									</view>
								</view>
								<view class=" size-30" style="color: #000;"> ￥{{ item.price }} </view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 盲盒 -->
			<view v-if="topIndex == 1">
				<image src="../../static/saleIcon.png" class="saleIcon" mode=""></image>
				<empty v-if="saleList.length == 0"></empty>
				<view class="" v-else>
					<view class="plr-30 size-30 ptb-30 mb-20 radius-30 bg" v-for="(itemOut, indexOut) in saleList"
						:key="indexOut">
						<view class="gray">
							{{ itemOut.time }}
						</view>
						<view class="mtb-20 gray" v-for="item in itemOut.data" :key="item.id">
							<view class="mb-20">
								{{ item.time }}
							</view>
							<empty v-if="item.data[0].goods.length == 0"></empty>
							<view v-else>
								<view class="flex flex-start mb-20" v-for="(itemIn, indexIn) in item.data[0].goods"
									:key="indexIn">
									<image class="saleImg mr-30 radius-30" :src="itemIn.image"></image>
									<view class="pt-28">
										<view class="size-28 gray">
											{{ itemIn.name }}
										</view>
										<view class="flex flex-start mtb-20">
											<view class="tipsLeft plr-20 ptb-7 radius-6" style="color: #fff"> 限量 </view>
											<view class="tipsRight red ptb-7 plr-20 red"
												style="border-radius: 0 6rpx 6rpx 0">
												{{ itemIn.stock }}
											</view>
										</view>
										<view class="size-40 gray"> ￥{{ itemIn.price }} </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 活动精选 -->
			<view v-if="topIndex == 2">
				<empty v-if="conList.length == 0"></empty>
				<view class="" v-else>
					<view class="bg-1 mb-20 radius-30" v-for="(item, index) in conList" :key="index"
						@click="goCon(item.id)">
						<image :src="item.image" class="conImg radius-30"></image>
						<view class="plr-30 ptb-30">
							<view class="white">
								{{ item.title }}
							</view>
							<view class="size-24 gray-2 mt-20 text-ellipsis-2" style="width: 630rpx">
								{{ item.desc }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 实名认证 -->
			<view v-if="authShow" class="white flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap"
				style="background-color: #d4ecff">
				<view class="red"> 完成实名认证，抢购快人一步 </view>
				<view class="ptb-16 plr-28 authMid radius-35" style="color: #fff" @click="toAuth"> 实名认证 </view>
				<u-icon name="close" color="#9A9A9A" @click="closeAuth"></u-icon>
			</view>
			<!-- 去登录 -->
			<view v-if="loginShow == true" class="red flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap">
				<view @click="toLogin"> 去登录，抢购快人一步 </view>
				<view class="flex flex-between">
					<view class="ptb-16 plr-28 authMid radius-35 mr-40" @click="toLogin"> 去登录 </view>
					<u-icon name="close" color="#9A9A9A" @click="loginShow = false"></u-icon>
				</view>
			</view>
			<tab></tab>
		</view>
		<view class="" v-if="showpage == 1">
			<view class="nomessage" v-if="list.length == 0">
				<empty></empty>
			</view>
			<view class="messagebox" v-if="list.length != 0" v-for="item in list">
				<view class="messagetit">
					{{item.title}}
				</view>
				<image :src="item.image" mode="widthFix" @click="todetail(item.id)"></image>
				<view class="">
					{{item.desc}}
				</view>
			</view>
			<tab></tab>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue';
	import tab from '../../components/tab.vue';

	export default {
		mounted() {
			setInterval(this.startPlay, 2000)
		},
		components: {
			empty,
			tab,

		},
		data() {
			return {
				ulList: [{
						msg: ' 123123123123'
					},
					{
						msg: '[1十八数藏上心公告]十八数藏积分兑换相关规则分兑换相关规则分兑换相关规则分兑换相关规则'
					},
				],
				play: false,

				arr: [
					// {val:'首页',active:true,index:0},
					// {val:'公告',active:false,index:1}
				],
				actionStyle: {
					'color': '#fff'
				},
				flag: false, //上拉加载
				loginShow: false,
				token: '',
				page: 1,
				status: 'more',
				authShow: false,
				topIndex: 0,
				tabs: ['数字藏品', '盲盒', '活动精选'],
				banner: [],
				collectList: [],
				saleList: [],
				conList: [],
				searchStr: '',
				showpage: 0,
			};
		},
		onShow() {

			this.token = uni.getStorageSync('token');
			if (this.token != '') {
				this.$http('api/user/userInfo').then(res => {
					uni.setStorageSync('phone', res.phone)
					if (res.is_auth == 0) {
						this.authShow = true;
					} else {
						this.authShow = false;
					}
				});
			} else {
				this.loginShow = true;
			}
			// 轮播图
			this.$http('api/index/bannerList').then(res => {
				this.banner = res;
			});
			// 公告
			this.$http('api/index/noticeList').then(res => {
				this.list = res;
			})
			this.init();
		},
		onHide() {
			this.collectList = [];
			this.flag = false;
			this.status = 'more';
			this.page = 1;
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = 'loading';
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.page = 1;
			this.collectList = [];
			this.init();
		},
		methods: {
			// startPlay() {
			// 	let that = this
			// 	that.play = true //开始播放
			// 	setTimeout(() => {
			// 		 that.ulList.push(that.ulList[0]) //将第一条数据塞到最后一个
			// 		that.ulList.shift() //删除第一条数据
			// 		that.play = false //暂停播放,此处修改，保证每一次都会有动画显示
			// 	}, 500)
			 
			// },
			todetail(index) {
				uni.navigateTo({
					url: './message?id=' + index
					// url: '../home/bannerCon?id=' + index
				});
			},
			search() {
				uni.navigateTo({
					url: './search'
				});
			},
			navfn(item) {
				for (let i = 0; i < this.arr.length; i++) {
					this.arr[i].active = false
				}
				item.active = true
				this.showpage = item.index
			},
			toLogin() {
				uni.navigateTo({
					url: '../login/index'
				});
			},
			goCon(id) {
				uni.navigateTo({
					url: './conDetails?id=' + id
				});
			},
			toAuth() {
				uni.navigateTo({
					url: '../my/realAuth'
				});
			},
			init() {
				if (this.topIndex == 0) {

					this.$http('api/goods/goodsList', {
						page: this.page,
						pagesize: 10,
						search: this.searchStr
					}).then(res => {
						uni.stopPullDownRefresh();
						let data = res.data;
						if (data.length == 0) {
							this.flag = true;
							this.status = 'noMore';
						} else {
							this.collectList = this.collectList.concat(data);
							if (data.length < 10) {
								this.flag = true;
								this.status = 'noMore';
							}
						}
						// console.log("当前页码：：",this.page);
						// let data = res.data;
						// if (this.collectList >= res.count) {
						// 	this.status = "nomore"
						// } else {
						// 	this.page = this.page + 1;
						// 	this.status = "loadmore";
						// 	console.log("改变页码：：",this.page);
						// }
						// this.collectList = this.collectList.concat(data);
						// uni.stopPullDownRefresh();
					});
				} else if (this.topIndex == 1) {
					this.$http('api/index/calendar').then(res => {
						this.saleList = res;
					});
				} else if (this.topIndex == 2) {
					this.$http('api/index/noticeList').then(res => {
						this.conList = res;
					});
				}
			},
			toUrl(index) {
				uni.navigateTo({
					url: './bannerCon?id=' + this.banner[index].id
				});
			},
			changeTop(index) {
				this.topIndex = index;
				this.saleList = [];
				this.conList = [];
				this.collectList = [];
				this.init();
			},
			goDetails(id) {
				uni.navigateTo({
					url: './homeDetails?id=' + id
				});
			},
			closeAuth() {
				this.authShow = false;
			},
			toSearch() {
				this.page = 1;
				this.collectList = [];
				this.$http('api/goods/goodsListSearch', {
					name: this.searchStr
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore';
					} else {
						this.collectList = this.collectList.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore';
						}
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.toUp {
		margin-top: -40px;
		transition: all 0.5s;
	}
	
	.listlist {
		list-style: none;
		// width: 252px;
		// text-align: center;
		// overflow: hidden;
		// height: 120px;
		// padding: 0;
		// margin: 0;
		// height: 100rpx;
		// margin: 0px 0 100px 0;
	}
	
	li {
		    // margin: 0px 0px 0px 0px;
		    // height: 30px;
	}
	.text_gonggao {
		text-indent: 1rem;
		font-size: 12px;
		width: 255px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		// height: 15px;
	}

	.image-bg {
		position: absolute;
		// z-index: -1;
		// left: 0;
		// right: 0;
		// bottom: 0;
		// right: 0;
		width: 100%;
		height: 100%;

	}

	.box_two {
		position: relative;
		height: 100rpx;
		border: 1px solid gainsboro;
		border-radius: 14px;
		margin: 0px 0px 10px 0;
	}

	.messagebox {
		width: 100%;
		height: 500rpx;
		color: white;

		.messagetit {
			text-align: center;
			font-weight: 700;
			font-size: 40rpx;
		}

		image {
			margin-top: 40rpx;
			width: 100%;
		}
	}

	.topbox {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		position: relative;

		.navitem {
			.navtext .navtext1 {
				color: #d1d1d2;
				font-weight: 600;
				font-size: 30rpx;
			}

			.navtext1 {
				color: #fff;
			}

			.line {
				width: 40rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #6bbeff, #e448f6);
				position: relative;
				top: -8rpx;
				margin: 0 auto;
				border-radius: 10rpx;
			}
		}

		image {
			position: absolute;
			right: 0rpx;
			top: 40rpx;
			width: 30rpx;
		}
	}

	.tipsLeft {
		background: #44acff;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, 0.3);
	}

	.allcollect {
		// display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.collectitem {
			// background-color: #000;
			margin-top: 20rpx;
			position: relative;
			border: 1px solid gainsboro;
			border-radius: 40px;
			// width: 48%;

			.collectItem {

				.itemTips {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					// font-size: 22rpx;
					z-index: 100;
				}

				.itemTips2 {
					width: 110rpx;
					height: 110rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					// font-size: 22rpx;
					z-index: 100;

					.sellout {
						width: 120%;
					}
				}

				.status1 {
					background: linear-gradient(to right, rgb(68, 172, 255), rgb(68, 172, 255));
					border-radius: 20rpx;
				}
			}

		}

		.workname {
			color: #fff;
		}

		.author {
			color: #fff;
		}
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}

	.lineImg {
		width: 40rpx;
		height: 14rpx;
	}

	.tabActive {
		color: #fff;
		font-size: 34rpx;
		font-family: 600;
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
		border-radius: 60rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.itemTips {}

	.tipsLeft {
		background: #44acff;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, 0.3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.saleIcon {
		width: 246rpx;
		height: 30rpx;
		margin: 30rpx auto;
		display: block;
	}

	.saleImg {
		width: 200rpx;
		height: 200rpx;
	}

	.conImg {
		width: 100%;
		height: 358rpx;
	}

	.authWrap {
		position: fixed;
		bottom: 140rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		background: rgba(212, 236, 255, 0.3);
		width: 690rpx;

		.authMid {
			background: #44acff;
			color: #fff;
		}
	}

	::v-deep  .u-indicator-item-round-active {
		background-color: #44acff !important;
	}
</style>
